<template>
  <!-- 修改用户名模块 -->
  <div class="modify-mation">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="当前昵称">
        <span style="font-size: 16px; color: #ff6700">{{ userInfo.user }}</span>
      </el-form-item>

      <el-form-item label="修改昵称" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
        <button @click="loginOut" class="btnout">退出登录</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from "vuex";
import { computed } from "vue";
export default {
  name: "Modify",
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      form: {
        username: "",
      },
      rules: {
        username: [
          //trigger:'blur'表示光标离开再触发
          {
            //rule当前规则对象，  value表示绑定的input的value值， callback表示表单校验完成
            validator: (rule, value, callback) => {
              // callback();不传值不表示校验成功
              // callback(new Error("传入校验不成功"));传值就是校验不成功
              // 1，校验用户名长度
              if (value.length < 2 || value.length > 8) {
                // 如果校验失败就不继续执行了
                return callback(new Error("请输入2 ~ 8位用户名"));
              }
              // 2，字符验证，正则表达式 匹配中文，英文字母和数字及_:
              if (/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value)) {
                //  当新用户名等于旧用户名时不允许修改
                if (value === this.userInfo.user) {
                  callback(new Error("不能修改为原来的名称"));
                } else {
                  callback(); //验证成功
                }
                // callback();//符合规则校验成功
              } else {
                callback(new Error("用户名由中英文及数字_组成"));
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["updateUserInfo", "clearUserInfo"]),
    // 确认修改
    onSubmit() {
      // 用户名修改
      this.$refs.form.validate(async (v) => {
        if (v) {
          let { data } = await this.$axios({
            method: "POST",
            url: "/personal/user",
            data: { user: this.form.username },
          });
          // console.log(data);
          // 修改失败
          if (data.code) return this.$message.error(data.message);
          // 修改成功
          this.$message.success(data.message);  //用户名修改成功
          this.updateUserInfo(data.data); //更新vuex里的数据
          this.$refs.form.resetFields(); // 清空表单
        } else {
          return false;
        }
      });
    },
    // 退出登录
    async loginOut() {
      let { data } = await this.$axios({
        method: "POST",
        url: "login/out",
      });
      // 退出成功
      this.$message.success(data.message);
      this.clearUserInfo(); //清空vuex里的数据
    },
  },
};
</script>

<style lang="less" scoped>
.modify-mation {
  margin-left: 20px;
}
.el-input {
  position: relative;
  width: 240px;
}

.btnout {
  background-color: #ccc;
  width: 98px;
  height: 40px;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
</style>